<script setup lang="ts">
import { usePurchaseUser } from "./utils/hook";
import { ref, computed, nextTick, onMounted } from "vue";
import { PureTableBar } from "@/components/RePureTableBar";
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
import { useI18n } from "vue-i18n";
const { t } = useI18n();
import forms, { type FormProps } from "./import.vue";
import {
  delay,
  subBefore,
  deviceDetection,
  useResizeObserver
} from "@pureadmin/utils";

import Delete from "@iconify-icons/ep/delete";
import EditPen from "@iconify-icons/ep/edit-pen";
import AddFill from "@iconify-icons/ri/add-circle-line";
import Close from "@iconify-icons/ep/close";
import Check from "@iconify-icons/ep/check";
const size = ref("small");
defineOptions({
  name: "shopGroup"
});


const treeRef = ref();
const formRef = ref();
const tableRef = ref();
const contentRef = ref();
const treeHeight = ref();

const {
  form, isShow, curRow, loading, columns, rowStyle,
  dataList, treeData,treeProps, isLinkage, pagination, isExpandAll, isSelectAll, treeSearchValue,
  onSearch,userList,openNewTab,
  resetForm,
  openDialog,
  handleDelete,
  filterMethod,
  transformI18n,
  onQueryChanged,
  handleSizeChange,
  handleCurrentChange,
  handleSelectionChange
} = usePurchaseUser(treeRef);

onMounted(() => {
  useResizeObserver(contentRef, async () => {
    await nextTick();
    delay(60).then(() => {
      treeHeight.value = parseFloat(
        subBefore(tableRef.value.getTableDoms().tableWrapper.style.height, "px")
      );
    });
  });
});
</script>

<template>
  <div class="main">
    <div ref="contentRef" :class="['flex', deviceDetection() ? 'flex-wrap' : '']">
      <PureTableBar :class="[isShow && !deviceDetection() ? '!w-[60vw]' : 'w-full']"
        style="transition: width 220ms cubic-bezier(0.4, 0, 0.2, 1)"
        title="店铺分组" :columns="columns" @refresh="onSearch">
        <template #title>
          <div style="margin-right: 20px">
            <el-button v-perms="'product:btn:add'" type="primary" :icon="useRenderIcon(AddFill)" :size="size" @click="openDialog()">{{ t("buttons.add") }}</el-button>
          </div>
        </template>


        <template v-slot="{ size, dynamicColumns }">
          <pure-table
            ref="tableRef"
            align-whole="center" showOverflowTooltip table-layout="auto" :loading="loading"
            :size="size" adaptive :row-style="rowStyle"
            :adaptiveConfig="{ offsetBottom: 108 }"
            :data="dataList" :columns="dynamicColumns"
            :pagination="{ ...pagination, size }"
            :header-cell-style="{
              background: 'var(--el-fill-color-light)',
              color: 'var(--el-text-color-primary)'
            }"
            @selection-change="handleSelectionChange"
            @page-size-change="handleSizeChange"
            @page-current-change="handleCurrentChange"
          >
            <template #operation="{ row }">
              <el-button v-perms="'shopGroup:btn:edit'"  class="reset-margin"  link type="primary"  :size="size" :icon="useRenderIcon(EditPen)"
                @click="openDialog('编辑', row)"
              >  {{ t("buttons.edit") }}</el-button>
              <el-popconfirm :title="t('buttons.deleteConfirm')" @confirm="handleDelete(row)" >
                <template #reference>
                  <el-button v-perms="'shopGroup:btn:delete'"  class="reset-margin" link type="primary" :size="size" :icon="useRenderIcon(Delete)">
                    {{ t("buttons.delete") }}
                  </el-button>
                </template>
              </el-popconfirm>
              <el-button v-perms="'shopGroup:btn:look'" class="reset-margin" link type="primary" :size="size" @click="openNewTab( '/system/shop/index?group='+row.id)"> {{ t("buttons.look") }}{{ t("buttons.store") }}</el-button>
            </template>
          </pure-table>
        </template>
      </PureTableBar>
    </div>
  </div>


</template>

<style lang="scss" scoped>
:deep(.el-dropdown-menu__item i) {
  margin: 0;
}

.main-content {
  margin: 24px 24px 0 !important;
}

.search-form {
  :deep(.el-form-item) {
    margin-bottom: 12px;
  }
}
</style>
